<template>
    <div class="page_root" data-page-name="发货分析" data-page-identification="p_v9lg64w0hl">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_bd1fpaneud 自定义模板_ea6s8fdwfl -->
            <div class="page">
                <a-row class="row">
                    <a-col :span="8">
                        <a-card title="业务现状" class="card">
                            <p v-for="item in state.data1">{{ item }}</p>
                        </a-card>
                    </a-col>
                    <a-col :span="8">
                        <a-card title="根因分析" class="card">
                            <p v-for="item in state.data2">{{ item }}</p>
                        </a-card>
                    </a-col>
                    <a-col :span="8">
                        <a-card title="经营建议" class="card">
                            <p v-for="item in state.data3">{{ item }}</p>
                        </a-card>
                    </a-col>
                </a-row>
                <div style="font-weight: 800">当月延迟发货</div>
                <div id="chart1"></div>
                <div id="chart2"></div>
            </div>
            <!-- end vid_bd1fpaneud 自定义模板_ea6s8fdwfl -->
        </a-spin>
    </div>
</template
>
<script setup>
import {
    h,
    ref,
    reactive,
    toRaw,
    markRaw,
    watch,
    computed,
    onBeforeMount,
    onMounted,
    onBeforeUnmount,
    onUnmounted,
    onActivated,
    onDeactivated
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
import {
    cloneDeep,
    isNullOrEmpty,
    isEmptyArr,
    isNullOrUnDef,
    localGet,
    isContained,
    isArray,
    isEmpty,
    merge,
    getDifferenceArray,
    isObject,
    traversalTreeStructure,
    checkCaseCondition,
    renderStringInTemplate,
    handleBreadcrumbJump,
    throttle
} from '@/utils/index'
import dayjs from 'dayjs'
import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
import { message, notification, Modal } from 'ant-design-vue'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'
/*** PUBLISH_EXEGESIS ***
import UserTableRecords from '@/model/UserTableRecords';
*** PUBLISH_EXEGESIS ***/

// 获取传入的流程ID
const props = defineProps({
    processInstanceId: {
        type: String
    }
})
const immediateWatch = (source, callback) => {
    watch(source, callback, { deep: true, immediate: true })
}

/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = []
const pageLoading = reactive({
    loading: false,
    tip: undefined
})

// 处理校验
const setSubFormName = (parentInfo, name) => {
    return [parentInfo.parents, parentInfo.cycleIndex, name]
}

/* ========================== 属性定义 ========================== */

/* -------------------------- 元素数据引用 -------------------------- */

/* ========================== 元素数据引用 ========================== */

/* -------------------------- 页面数据 -------------------------- */

/* ========================== 页面数据 ========================== */

/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */

/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */

/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
    processInstanceId: props.processInstanceId
})

/* ========================== 页面参数 ========================== */

/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================

/* ========================== 组件事件处理方法 ========================== */

/* -------------------------- 生命周期 -------------------------- */
onMounted(() => { })

onUnmounted(() => {
    // 销毁定时器
    setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ? clearInterval(timer) : clearTimeout(timer)
    })
})

/* ========================== 生命周期 ========================== */

/* -------------------------- 数据关联处理 -------------------------- */

/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */

/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */

// ================================定制化逻辑========================================

const state = reactive({
    data1: [],
    data2: [],
    data3: [],
    list: []
})
function getData() {
    post('/solution-wb/api/v1/analysis/delivery_goods_analysis', {}).then(
        ({ data: { businessStatus, reasonAnalysis, manageAugust, dataList } }) => {
            state.data1 = businessStatus.split(';')
            state.data2 = reasonAnalysis.split(';')
            state.data3 = manageAugust.split(';')
            state.list = dataList
        }
    )
}
getData()
</script>
<style lang="less" scoped>
.page_root {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container) {
    height: 100%;
}

.table-moreBtn_down {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
}

/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .ant-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
}

:deep(.@{ant-prefix}-table-row-level-2 .ant-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
}

:deep(.@{ant-prefix}-table-row-level-3 .ant-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
}

:deep(.@{ant-prefix}-table-row-level-4 .ant-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list) {
    height: 100%;
    width: 50%;
}
</style>
